<template>
	<div class="customer-dialog">
	  <el-dialog
	    :title="title"
		v-if="isAuth(['ROOT', 'VIDEO_DIAGNOSE:SELECT'])"
		v-model="visible"
		custom-class="dialog"
	    width="52.5%"
	  >
	    <el-form
	      ref="form"
	      class="customer-form"
	      :model="form"
	      label-width="97px"
	      :inline="true"
	      :rules="dataRule"
	      label-suffix=":"
	    >
	      <el-form-item label="患者姓名" prop="patientName" class="form-style">
	        <el-input v-model.trim="form.patientName" placeholder="请输入" maxlength="30" size="small" class="input-style" />
	      </el-form-item>
	      <el-form-item label="医生姓名" prop="doctorName" class="form-style">
	        <el-input v-model.trim="form.doctorName" placeholder="请输入" maxlength="30" size="small" class="input-style" />
	      </el-form-item>
	      <el-form-item label="诊断结果" prop="diagnosis" class="form-style">
	        <el-input v-model.trim="form.diagnosis" placeholder="请输入" maxlength="30" size="small" class="input-style" />
	      </el-form-item>
	
	      <div v-for="(item, index) in form.dynamicItem" :key="index" style="height: 100px">
	        <el-form-item label="药名" class="form-style">
	          <el-autocomplete
	              v-model="item.name"
	              :fetch-suggestions="querySearch"
				  :trigger-on-focus="false"
				  clearable
	              placeholder="Please input"
	              @select="handleSelect"
	            />
	        </el-form-item>
	        <el-form-item label="数量" class="form-style">
	          <el-input v-model="item.num" size="small" class="special-style" />
	        </el-form-item>
			<el-form-item label="用量" class="form-style">
			  <el-input v-model="item.spec" size="small" class="special-style" />
			</el-form-item>
			<el-form-item label="用法" class="form-style">
			  <el-input v-model="item.method" size="small" class="special-style" />
			</el-form-item>
	        <el-form-item>
	          <el-button v-if="index+1 == form.dynamicItem.length" type="primary" size="mini" @click="addItem(form.dynamicItem.length)">+</el-button>
	          <el-button v-if="index !== 0" type="danger" size="mini" @click="deleteItem(item, index)">-</el-button>
	        </el-form-item>
	      </div>
	    </el-form>
	    <div slot="footer" class="dialog-footer">
	      <el-button @click="visible = false">取消</el-button>
	      <el-button type="primary" @click="outHandle(form.id)">确定</el-button>
	    </div>
	  </el-dialog>
	</div>

</template>

<script>
export default {
	components: {
	},
	data: function() {
		return {
			visible: false,
			restaurants:[
			    { value: '半夏止咳糖浆'},
			    { value: '头孢克圬分散片'},
			    { value: '止咳橘红胶囊'},
			    { value: '蒲地蓝消炎片'},
			    { value: '蓝岑颗粒'},
			    { value: '阿奇霉素分散片'},
			    { value: '黄连抑菌液'},
				{ value: '鼻用过敏原阻隔剂'},
			],
            form: {
				id: null,
				patientName: '',
				doctorName: '',
				diagnosis: '',
				patientCardId: '',
				subDeptId: '',
				doctorId: '',
				registrationId: '',
                dynamicItem: [
                //默认显示一条
                  {
                    name: '',
                    num: '',
                    spec: '',
					method: ''
                  }
                ], 
            },
            dataRule: {
                patientName: [
                    { required: true, message: '患者姓名不能为空' },
                    {
                        pattern: '^[\\u4e00-\\u9fa5]{2,20}$',
                        message: '姓名格式错误'
                    }
                ],
                doctorName: [
                   { required: true, message: '医生姓名不能为空' },
                   {
                       pattern: '^[\\u4e00-\\u9fa5]{2,20}$',
                       message: '姓名格式错误'
                   }
                ],
                diagnosis: [
                    {
                        required: true,
                        message: '诊断结果不能为空'
                    }
                ],
            }
        };
	},
	methods: {
		querySearch(queryString, cb){
		        const results = queryString ? this.restaurants.filter(this.createFilter(queryString)) : this.restaurants
		        // call callback function to return suggestions
		        cb(results)
		},
		createFilter(queryString){
		    return (restaurant) => {
		        return (
		            //restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) == 0
		            /*index==0表示是否在第一个索引位置找到输入的字符，*/
		            restaurant.value.indexOf(queryString) != -1 //这个语句表示只有有关键字即可，不论在哪个位置匹配到
		            
		        )
		    }
		},
		//输入选定的值
		handleSelect(item){
		    console.log("输入选定的对象item:（只有选择了查询列表里面的数据才会触发这个方法）",item)
		    console.log("输入框的值zhanghao：",this.dynamicItem.name)
		},
		addItem(length) {
		      if (length >= 10) {
		        this.$message({
		          type: 'warning',
		          message: '最多可新增10条!'
		        })
		      } else {
		        this.form.dynamicItem.push({
		          name: '',
		          num: '',
		          spec: '',
		          method: ''
		        })
		      }
		    },
		    //删除方法
		    deleteItem(item, index) {
		      this.form.dynamicItem.splice(index, 1)
		    },
		reset: function() {
		    let form = {
		        id: null,
		        patientName: null,
		        doctorName: null,
		        diagnosis: null,
				patientCardId: null,
				subDeptId: null,
				doctorId: null,
				registrationId: null,
				dynamicItem: [
                //默认显示一条
                  {
                    name: null,
                    num: null,
                    spec: null,
					method: null
                  }
                ]
		    };
		    this.form = form;
		},
		init: function(id) {
		    let that = this;
		    //重置表单控件
		    that.reset();
		    //如果id是undefined，就对模型层id变量赋值为0
		    that.form.id = id || 0;
		    //显示对话框
		    that.visible = true;
		    		  
		    //DOM渲染操作要放在$nextTick函数中执行，例如加载数据
		    that.$nextTick(() => {
		        //清理前端验证结果
		        that.$refs['form'].resetFields();
		      
		        //下方是新添加的内容
		        if (that.form.id) {
		            that.$http('/prescription/searchPrescriptionById', 'POST', { id: id }, true, function(resp) {
		                that.form.patientName = resp.patientName;
		                that.form.doctorName = resp.doctorName;
						that.form.patientCardId = resp.patientCardId;
						that.form.subDeptId = resp.subDeptId;
						that.form.doctorId = resp.doctorId;
		            });
		        }
		    });
		},
		outHandle: function(id) {
		    let that = this;
		    //前端表单验证
		    that.$refs['form'].validate(function(valid) {
		        if (1) {
		            that.$http('/prescription/searchPrescriptionById', 'POST', { id: id }, true, function(resp) {
		            	let data={
		            		patientCardId: resp.patientCardId,
		            		subDeptId: resp.subDeptId,
		            		doctorId: resp.doctorId,
		            		id: resp.id
		            	}
		            	that.$http('/prescription/insert', 'POST', data, true, function(
		            	    resp
		            	) {
		            	    ElMessage({
		            	        message: '操作成功',
		            	        type: 'success',
		            	        onClose: () => {
		            	            that.loadDataList();
		            	        }
		            	    });
							that.visible = false;
							that.$emit('refreshDataList');
		            	});
		            });
		        }
		    });
		},
	}
};
</script>

<style lang="scss">
  .customer-dialog{
    .customer-form{
      height: 320px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .address{
        .el-form-item__content{
          width: 89%;
        }
        .el-input__inner{
          width: 100%;
        }
    }
    .form-style{
      margin-bottom: 30px;
      .input-style{
        width: 215px;
      }
      .special-style{
        width: 194px;
      }
    }
    /**滚动条的宽度*/
    ::-webkit-scrollbar {
      width: 8px;
    }
    //滚动条的滑块
    ::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 5px;
    }
  }
</style>

